<template>
    <!-- 顶部搜索栏 -->
    <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="电影名称">
            <el-input v-model="title" placeholder="电影名称" clearable />
        </el-form-item>
        <el-form-item label="电影类型">
            <el-select v-model="genres" placeholder="请选择类型" clearable>
                <el-option label="喜剧" value="喜剧" />
                <el-option label="动作" value="动作" />
                <el-option label="剧情" value="剧情" />
                <el-option label="悬疑" value="悬疑" />
                <el-option label="动画" value="动画" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="getMovieList">搜索</el-button>
            <el-button type="default" @click="reset">重置</el-button>
        </el-form-item>
    </el-form>

    <!-- 主体表格数据 -->
    <el-table :data="movieList" style="width: 100%">
        <el-table-column prop="title" label="电影名称" width="180" />
        <el-table-column prop="genres" label="类型" width="180" />
        <!-- <el-table-column prop="msg" label="导演信息" /> -->
        <el-table-column prop="rate" label="评分" width="80" />
        <el-table-column label="封面照片">
            <!-- 插槽语法,scope 是插槽作用域，包含了当前行的数据,scope.row是当前行的数据对象，img是该行的图片字段
       :preview-src-list="[scope.row.img]" 启用图片预览功能
       preview-teleported 属性，这会将预览弹窗插入到 body 元素中
      -->
            <template #default="scope">
                <el-image style="width: 100px; height: 100px" :src="scope.row.img" :preview-src-list="[scope.row.img]"
                    preview-teleported />
            </template>
        </el-table-column>
        <el-table-column prop="showTime" label="上映时间" />
        <el-table-column prop="" label="操作">
            <el-button type="primary" :icon="Edit" circle />
            <el-button type="danger" :icon="Delete" circle />
        </el-table-column>
    </el-table>

    <!-- 分页栏 -->
    <el-pagination class="pagination" v-model:current-page="currentPage4" v-model:page-size="pageSize4"
        :page-sizes="[10, 20, 30, 40]" :size="size" :disabled="disabled" :background="background"
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />



</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import request from '@/utils/request'
import type { ComponentSize } from 'element-plus'
import {
    Delete,
    Edit,
} from '@element-plus/icons-vue'

const movieList = ref([])
const title = ref('')
const genres = ref('')

const currentPage4 = ref(1)
const pageSize4 = ref(10)
const total = ref()
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)
//用户改变每页显示条目数时触发（例如从每页显示10条改为每页显示20条）
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
    pageSize4.value = val //将新的条目数保存到 pageSize4 响应式变量中
    currentPage4.value = 1; // 将当前页重置为第1页（因为条目数改变后总页数会变化，所以需要回到首页）
    getMovieList();
}
//用户切换页面时触发（例如从第1页跳转到第2页）：
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    currentPage4.value = val //将新页码保存到 currentPage4 响应式变量中
    getMovieList()
}
const getMovieList = async () => {
    const data = await request.get("/movie/selectPageByService",
        {
            params: {
                current: currentPage4.value,
                size: pageSize4.value,
                title: title.value ? title.value : '',
                genres: genres.value ? genres.value : '',
            }
        })
    console.log(data);
    movieList.value = data.records
    total.value = data.total
}

onMounted(() => {
    getMovieList()
})

const reset = () => {
    title.value = ''
    genres.value = ''
    getMovieList()
}
</script>

<style scoped>
.pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}
</style>

